<!--  -->
<template>
  <div class='headers'>
    <div>
      axios安装<br>
      npm install axios --save-dev<br>
      新建utils文件夹与api.js，request.js<br>
      <img src="../../assets/1.png" alt=""><br>
      api.js中 设置请求接口便于管理<br>
      ---------------------------------------------<br>
      const url='http://192.168.1.140:0000/';<br>
      const url2='http://xxxxxxxxxxxx/';<br>
      export default{<br>
      url2,<br>
      // 接口一<br>
      menu: url + "advertise/messag", <br>
      tablehead: url2 + "menu/table" <br>
      }<br>
      // 在页面中引入 import api from "@/utils/api";<br>
      // 使用 api.menu //http://192.168.1.140:0000/advertise/messag<br>
      // api.url2 //http://xxxxxxxxxxxx/<br>
      request.js中<br>
      ---------------------------------------------<br>
      import axios from 'axios';<br>
      import { Message } from 'element-ui'//使用element ui 提示框<br>
      axios.defaults.withCredentials = true; // 设置跨域请求提供凭据信息<br>
      //创建axios实例<br>
      const service = axios.create({<br>
      baseURL: "",<br>
      timeout: 5000<br>
      });
      //请求拦截器<br>
      service.interceptors.request.use(<br>
      config => {<br>
      //请求发送之前做一些处理<br>
      return config;<br>
      },<br>
      error => {<br>
      Message.error(error);<br>
      // 发送失败<br>
      console.log(error);<br>
      return Promise.reject(error);<br>
      }
      );
      //响应拦截器<br>
      service.interceptors.response.use(<br>
      response => {<br>
      //请求成功做的处理<br>
      // dataAxios 是 axios 返回数据中的 data<br>
      // loadingInstance.close();<br>
      const dataAxios = response.data;<br>
      return dataAxios;<br>
      },<br>
      error => {<br>
      return Promise.reject(error);<br>
      }<br>
      );<br>
      // 封装get<br>
      export function get(url, params) {<br>
      return new Promise((resolve, reject) => {<br>
      axios.get(url, {<br>
      params: params<br>
      }).then(<br>
      res => {<br>
      resolve(res.data);//返回数据 解决 res.data.data <br>
      },<br>
      err => {<br>
      Message.error({message: '获取数据失败'});//使用element ui 提示框<br>
      }<br>
      ).catch(err => {<br>
      Message.error(err.message);<br>
      reject(err);<br>
      });<br>
      });<br>
      }<br>
      //封装post请求<br>
      export function post(url, data = {}) {<br>
      //默认配置<br>
      let sendObject = {<br>
      url: url,<br>
      method: "post",<br>
      headers: {<br>
      "Content-Type": "application/json;charset=UTF-8"<br>
      },<br>
      data: data<br>
      };<br>
      sendObject.data = JSON.stringify(data);<br>
      return service(sendObject);<br>
      }<br>
      export default {<br>
      service,<br>
      get,<br>
      post<br>
      };<br>
      ------------------<br>
      页面中使用<br>
      引入<br>
      import api from "@/utils/api";//接口文件<br>
      import request from "@/utils/request";//封装的请求<br>
      //api.menu 请求接口 data 数据<br>
      request.get(api.menu,data).then(res=>{<br>
      console.log(res)<br>
      this.$message.success('请求成功')<br>
      })<br>
    </div>
    <div>
      <navs></navs>
    </div>
  </div>
</template>

<script>
  import navs from './navs.vue';

  export default {
    components: {
      navs
    },
    name: '',
    data() {
      //这里存放数据
      return {

      };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='less' scoped>
  .headers {
    margin-bottom: 60px;
  }

</style>
